<!DOCTYPE html>  
<html>  
<head>  
<link rel="stylesheet" href="css/index.css">
  <style>  
    #nav-item {  
      display: block;  
	  width: 100px;
	  height: 50px;
      padding: 10px;  
      cursor: pointer;  
	  position: fixed;
	  left: 280px;
	  top: 0px;
	  color: white;
    }  
  #nav-item2 {
    display: block;  
    width: 100px;
    height: 50px;
    padding: 10px;  
    cursor: pointer;  
    position: fixed;
    left: 460px;
	top: 0px;
	 color: white;
  }  
  #nav-item3 {
    display: block;  
    width: 100px;
    height: 50px;
    padding: 10px;  
    cursor: pointer;  
    position: fixed;
    left: 580px;
	top: 0px;
	 color: white;
  }  
  #nav-item4 {
    display: block;  
    width: 100px;
    height: 50px;
    padding: 10px;  
    cursor: pointer;  
    position: fixed;
    left: 730px;
	top: 0px;
	 color: white;
  }  
  #nav-item5 {
    display: block;  
    width: 100px;
    height: 50px;
    padding: 10px;  
    cursor: pointer;  
    position: fixed;
    left: 880px;
	top: 0px;
	 color: white;
  }
    .submenu{
      display: none;   
	  width: 100%;
	  height: 550px;
	  background-color: #2c3338;
	  position: fixed;
	  top: 50px;
	  width: 100%;
	  z-index: 10;
    }  
  
    .active {  
      color: white;  
    }  
	#p1{
		position: relative;
		left: 200px;
		top:400px;
		
	}
	#p2{
		position: relative;
		left: 200px;
		top:350px;
		
	}
	 body {
	      background-image: url('pic/index_top.webp'); /* 设置背景图片 */
	      background-size: cover; /* 让背景图片覆盖整个页面 */
	      background-attachment: fixed; /* 固定背景图片 */
	      background-position: center; /* 居中显示背景图片 */
		  background-size: 1800px 1000px;
		  box-shadow: dimgrey;
	    }
		/*body::after{
			content: "";  
			    position: absolute;  
			    top: 0;  
			    left: 0;  
			    width: 100%;  
			    height: 100%;  
			    background: rgba(85, 85, 85, 0.5);
		}*/
		#button{
			position: relative;
			left:200px;
			top:300px;
			background-color: orange;
			border: 0px;
			border-radius: 20px;
		}
		#a{
			text-decoration:none;
			color:white;
		}
		#Login_register{
			position: fixed;
			top: 2%;
			left: 1200px;
			color: white;
		}
		#span1{
			text-decoration: none;
			color: white;
		}
  </style>  
</head>  
<body>  
  <div class="nav-item" onclick="toggleSubMenu(this)" id="nav-item">SUPERCARS</div>
  <div class="submenu" id="submenu1">  
    <div id="car2"><img src="pic/car2.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>  
    <div id="car3"><img src="pic/car3.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>  
    <div id="car4"><img src="pic/car4.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>  
	<div id="car5"><img src="pic/car5.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
	<div id="car6"><img src="pic/car6.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
  </div>  
  <div class="nav-item" onclick="toggleSubMenu(this)" id="nav-item2">GT</div>  
  <div class="submenu" id="submenu2">  
   <div id="car720s"><img src="pic/car720s.webp"/>
   <button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
   </div>
   <div id="car720s2"><img src="pic/car720s2.webp"/>
   <button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
   </div>  
  </div>  
  <div class="nav-item" onclick="toggleSubMenu(this)" id="nav-item3">ULTIMATE</div>
  <div class="submenu" id="submenu3">  
    <div id="car2"><img src="pic/car2.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
    <div id="car3"><img src="pic/car3.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
    <div id="car4"><img src="pic/car4.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
	<div id="car5"><img src="pic/car5.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
	<div id="car6"><img src="pic/car6.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
	<div id="car7"><img src="pic/car7.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
	<div id="car8"><img src="pic/car8.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
	<div id="car9"><img src="pic/car9.webp"/>
	<button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
	</div>
  </div>  
  <div class="nav-item" onclick="toggleSubMenu(this)" id="nav-item4">SOLUS GT</div>
  <div class="submenu" id="submenu4">  
   <div id="car2"><img src="pic/car2.webp"/>
   <button style="height: 40px;width: 100px;" id="button1"><a href="index.html" id="a">了解详情</a></button>
   </div>
   <div id="allcar"><img src="pic/allcar.webp"/>
   <button style="height: 40px;width: 100px;" id="button2"><a href="index.html" id="a">了解详情</a></button>
   </div>
  </div>  
  <div class="nav-item" onclick="toggleSubMenu(this)" id="nav-item5">LEGACY</div>
  <div class="submenu" id="submenu5">  
    <div id="all"><img src="pic/all.webp"/>
	<button style="height: 40px;width: 100px;" id="button2"><a href="index.html" id="a">了解详情</a></button>
	</div>    
  </div>  
	  <p style="font-size: 30px;color: white;font-weight:lighter;" id="p1">全球首发</p>
	  <p style="font-size: 80px;color: white;font-weight:lighter;" id="p2">全新迈凯伦&ensp;750S</p>
	  <button style="height: 40px;width: 250px;" id="button"><a href="index.html" id="a">了解详情</a></button>
	<div id="Login_register">
		<span><a href="login.html" id="span1">LOGIN</a></span>
		<span><a href="login.html" id="span1">REGISTER</a></span>
	</div>
	<div id="logo">
		<img src="pic/logo.png" style="width: 200px;height: 30px;"/>
	</div>
  <script>  
    function toggleSubMenu(element) {
  var submenu = element.nextElementSibling;

  if (submenu.style.display === 'none') {
    submenu.style.display = 'block';
    element.classList.add('active');
  } else {
    submenu.style.display = 'none';
    element.classList.remove('active');
  }
}
    // 点击其他行时，隐藏当前行的子菜单并移除 'active' 类  
    document.querySelectorAll('.nav-item').forEach(function (row) {
  row.addEventListener('touchstart', function (e) {
    var submenu = e.target.nextElementSibling;
    submenu.style.display = 'none';
    e.target.classList.remove('active');
  });
  });
   document.addEventListener('mousemove', function(e) {
        var mouseX = e.pageX;
        var mouseY = e.pageY;
  
        var bgMoveX = -(mouseX / 10);
        var bgMoveY = -(mouseY / 10);
  
        document.body.style.backgroundPosition = bgMoveX + 'px ' + bgMoveY + 'px';
      });
  </script>  
</body>  
</html>